<template>
  <el-container class="warp-content home">
    <!-- 左侧主体部分 -->
    <el-main>
      <!-- banner图 -->
      <Banner
        title="全部文章"
        desc="记录学习过程中的一些笔记"
        bg-img="bg1.svg"
        bg-size="360"
      />
      <!-- 每个博客卡片 -->
      <div
        v-for="blog in blogs"
        :key="blog.id"
        class="blogCard"
        @click="$router.push(`/blog/${blog.blogId}`)"
      >
        <p class="title">
          {{ blog.title }}
        </p>
        <p class="brief">{{ blog.desc }}</p>
        <div class="bottom">
          <div class="time">
            <i class="iconfont icon-clock"></i>{{ blog.createdAt }}
          </div>
          <div v-if="blog.tags.length !== 0" class="tags">
            <i class="iconfont icon-tag"></i>
            <span>{{ formatTags(blog.tags) }}</span>
          </div>
          <!-- <div class="views">
            <i class="iconfont icon-eye"></i><span>{{ blog.viewCount }}</span>
          </div> -->
          <div class="category">
            <i class="iconfont icon-category"></i>
            分类：{{ blog.category ? blog.category.title : "/" }}
          </div>
        </div>
      </div>
      <!-- 分页组件 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-size="pageSize"
        :layout="paginationLayout"
        :total="total"
      >
      </el-pagination>
    </el-main>
    <!-- 侧边栏 -->
    <el-aside>
      <MyInfo />
      <Category class="aside-item" />
      <Link class="aside-item" />
    </el-aside>
  </el-container>
</template>

<script>
import Banner from "@/components/frontend/Banner";
import MyInfo from "@/components/frontend/MyInfo";
import Category from "@/components/frontend/CategoryAside";
import Link from "@/components/frontend/LinkAside";
export default {
  name: "Home",
  components: { Banner, MyInfo, Category, Link },
  data() {
    return {
      total: 0, // 总数
      pageNum: 1, // 当前页码
      pageSize: 10, // 每页数量
      blogs: [], // 博客列表
      // 随着移动端改变分页组件显示情况
      paginationLayout: "total, sizes, prev, pager, next, jumper",
      // 防抖定时器
      timer: null
    };
  },
  /**
   * 生命周期钩子
   */
  async created() {
    this.getBlog();
    this.resizeChange();
  },
  mounted() {
    window.onresize = () => {
      this.resizeChange();
    };
  },
  methods: {
    /**
     * 页面宽度改变
     */
    resizeChange() {
      const paginationLayout1 = "total, sizes, prev, pager, next, jumper";
      const paginationLayout2 = "prev, pager, next, jumper";
      // 防抖
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        console.log("resize");
        if (document.body.clientWidth < 576) {
          this.paginationLayout = paginationLayout2;
        } else {
          this.paginationLayout = paginationLayout1;
        }
      }, 100);
    },
    /**
     * 每页显示数量改变
     * @param val 改变后数量
     */
    handleSizeChange(val) {
      this.pageSize = val;
      this.getBlog();
    },
    /**
     * 当前页码改变
     * @param val 改变后页码
     */
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getBlog();
    },
    /**
     * 获取博客列表
     */
    async getBlog() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      let { data: res } = await this.$api.webApi.getIndexBlog(params);
      this.total = res.data.total;
      this.blogs = res.data.blogList;
      window.scrollTo(0, 0);
    },
    formatTags(tags) {
      tags = tags.map(item => {
        return item.name;
      });
      return tags.join(",");
    }
  }
};
</script>

<style lang="scss" scoped>
.home {
  .el-pagination {
    margin-top: 20px;
    margin-bottom: 30px;
  }

  .banner {
    margin-bottom: 20px;
  }
}

.blogCard {
  height: 155px;
  padding: 24px 24px 24px 40px;
  border-bottom: 1px solid #eee;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  &:hover {
    cursor: pointer;
  }

  &:active {
    background-color: rgb(250, 250, 250);
  }

  p.title {
    color: #000;
    font-size: 16px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    &:hover {
      color: #30a9de;
    }
  }

  p.brief {
    font-size: 13px;
    color: $text-level-2;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding-right: 100px;
    letter-spacing: 0.2px;
    line-height: 1.5em;
  }

  .bottom {
    display: flex;
    color: $text-level-3;
    font-size: 13px;

    .tags,
    .views {
      margin-left: 20px;
    }

    .category {
      margin-left: auto;
    }

    .iconfont {
      margin-right: 5px;
    }
  }

  .icon-clock {
    color: orangered;
  }

  .icon-category {
    color: dodgerblue;
  }

  .icon-eye {
    color: darkcyan;
  }

  .icon-tag {
    color: dodgerblue;
  }
}

.el-aside,
.el-aside > .aside-item {
  margin-top: 20px;
}

.loadingMore {
  font-size: 14px;
  text-align: center;
  height: 30px;
  margin-top: 20px;
  cursor: pointer;
}
</style>
<style lang="scss" scoped>
@media screen and (max-width: 576px) {
  .blogCard {
    height: 100px;
    padding: 10px;
    margin-top: 10px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
    border: none;

    .category {
      display: none;
    }
  }
}
</style>
